<template>
    <div>
        <el-form
       label-width="100"
       :model="form"
       class="myform"
       status-icon
       :rules="rules"
       ref="myform"
       >
         <el-form-item label="手机号码" prop="phone">
           <el-input type="text" placeholder="请输入" v-model="form.phone"
           ></el-input>
       </el-form-item>
        <el-form-item label="验证号码" prop="captcha">
           <el-row>
                    <el-col :span="13">
                        <el-input 
                            type="text" 
                            placeholder="请输入" 
                            v-model="form.captcha"  
                        >
                        </el-input>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-button @click="startSend" :disabled="disabled" v-if="flag" type="success">发送验证码</el-button>
                        <el-button v-else :disabled="disabled" >
                            剩余{{count}}秒
                        </el-button>
                    </el-col>
                </el-row>
       </el-form-item>
        <el-form-item>
                <p class="flex">
                    <el-button type="primary" class="btn" @click="submitForm('myform')"
                        >验证</el-button
                    >
                    <el-button type="danger" class="btn" @click="resetForm('myform')">重置</el-button>
                </p>
            </el-form-item>
            <el-form-item class="lastitem">
                <div class="links">
                    <router-link class="litem" :to="{name:'register'}">
                        没有账号,立即注册
                    </router-link>
                        <router-link class="litem color"  :to="{name:'forgetpass'}">
                        忘记密码 
                    </router-link>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {  ref,toRefs,reactive,watch,onUnmounted,onMounted } from 'vue'
import {reg} from "@/utils/validate"
import {toast} from "@/utils/index"
import {ajax} from "@/api"
import {useRouter} from "vue-router"
var timer = null 
export default {
    name:'loginphone',
    setup(){
        const myform = ref()
        const router = useRouter()
        const state =reactive({
            form:{},
            disabled:true,
            flag:true,
            count:120,
            rules:{
                 phone:[
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur',
                    },
                   {
                        pattern:reg.phone,
                        trigger:'blur',
                        message:"请输入11位的电话号码"
                    }
                ],
                captcha:[
                    {
                        required: true,
                        message: '请输入验证码',
                        trigger: 'blur',
                    },
                   {
                        pattern:reg.code,
                        trigger:'blur',
                        message:"请输入正确的验证码"
                    }
                ],
            }
        })

        onMounted(()=>{
            state.form.phone = localStorage.getItem('phone')
        })

        watch(state.form,(v)=>{
            // console.log(v);
            if(reg.phone.test(v.phone)){
                state.disabled = false
            }else{
                state.disabled = true
            }
        })
        const submitForm = ()=>{
            myform.value.validate(async (valid)=>{
                if(valid){
                    let {code,reslut,token} = await ajax.verifycaptcha(state.form)
                    if(code==200){
                        router.push({name:'main'})
                        localStorage.setItem('phone',state.form.phone)
                        sessionStorage.setItem('token',token)
                    }
                }else{
                    toast.error('请输入有效的验证信息')
                }
            })
        }
         const resetForm = ()=>{
             myform.value.resetFields()
        }
        onUnmounted(()=>{
                    clearInterval(timer)
                     timer = null
                    state.count=120
                     state.flag = true
        })
        const startSend = ()=>{
                    state.count--;
                     state.flag = false
             timer = setInterval(() => {
                 if(state.count>0){
                     state.count--;
                     state.flag = false
                 }else{
                     clearInterval(timer)
                     timer = null
                      state.count=120
                     state.flag = true
                 }
             }, 1000);
             sendCode()
        }

        const sendCode = async ()=>{
            let  {reslut,code} = await ajax.sendcaptcha({phone:state.form.phone})
            if(code!=200){
clearInterval(timer)
                     timer = null
                      state.count=120
                     state.flag = true
            }
        }

        return{
            myform,
            ...toRefs(state),
            submitForm,
            resetForm,
            startSend
            
        }
    }
}
</script>